<template>
    <fieldset>
        <legend>登录</legend>
        用户名:
        <input type="text" v-model="username">
        <br/>
        密码:
        <input type="password" v-model="password" @keydown.enter="login">
        <br/>
        <button @click="login">登录</button>

    </fieldset>
</template>

<script setup>
import {ref} from "vue"
import { useRouter } from "vue-router";
import * as api from "../../api/users"

// 1、获取输入框中用户名和密码
let username = ref('')
let password = ref('')

// 2、发起请求，请求登入

let router =useRouter()

let login = async () => {
    let res = await api.loginApi(username.value,password.value) 
    // 服务器会返回token，这个token是个令牌，这个令牌需要保存在本地，
    // 后续请求的时候带上令牌，就能随意访问数据了

    // 1、localStorage 关掉页面，只要token还具备时效性，就能访问其他页面，不需要登录
    // 2、sessionStorage  用户关掉页面，token就会清除，不管token生不生效，重新打开页面，用户重新登录
    if(res.data.state){
        // token存到本地
        sessionStorage.setItem('qf-0-token',res.data.token)
        // 页面跳转
        router.push("/")

    }else{
        alert(res.data.msg)
    }
}


</script>